import { h } from "vue";
import {
  DatePickerProps,
  InputProps,
  NButton,
  SelectProps,
} from "naive-ui";
import { TableColumns } from "@/type";

export const Columns = (): TableColumns => {
  return [
    {
      type: "selection",
      width: "40px",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "序号",
      key: "id",
      width: "60px",
      align: "center",
      fixed: "left",
      hideInForm: true,
      hideInSearch: true,
    },
    {
      title: "方案名称",
      key: "scenarioName",
      width: "50px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
    },
    {
      title: "规则名称",
      key: "ruleName",
      width: "50px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "input",
      formItemProps: {
        placeholder: "请输入",
      } as InputProps,
      hideInSearch: true,
    },
    {
      title: "校验范围",
      key: "checkRange",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "daterange",
      formItemProps: {
        type: "daterange",
        style: {
          width: "100%",
        },
      } as DatePickerProps,
    },
    {
      title: "执行时间",
      key: "excutionTime",
      width: "80px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "datetime",
      formItemProps: {
        placeholder: "请选择",
        type: "datetime",
        options: [],
        style: {
          width: "100%",
        },
      } as DatePickerProps,
    },
    {
      title: "是否一致",
      key: "accordance",
      width: "60px",
      align: "center",
      render(row: any) {
        return [
          h(NButton, {
            text: true,
            style:{
                color: row.accordance ? "green" : "red"
            },
            value: row.accordance,
            onClick: () => {
              row.accordance = !row.accordance;
            },
          },{
            default: () => row.accordance ? "是" : "否"
          }
          ),
        ];
      },
      category: "button",
      hideInSearch: true,
      hideInForm:true,
    },
    {
      title: "检验表",
      key: "checkTable",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: [
          {
            label: "ABC",
            value: "checkTable1",
          },
          {
            label: "TopocTable2",
            value: "topicTable2",
          },
          {
            label: "topicTable3",
            value: "topicTable3",
          },
          {
            label: "topicTable4",
            value: "topicTable4",
          },
          {
            label: "topicTable5",
            value: "topicTable5",
          },
        ],
      } as SelectProps,
      hideInSearch: true,
    },
    {
      title: "关联ETL包",
      key: "etlPackage",
      width: "100px",
      align: "center",
      ellipsis: {
        tooltip: true,
      },
      category: "select",
      formItemProps: {
        placeholder: "请选择",
        options: [
          {
            label: "ABC_ETL_1",
            value: "ETL包1",
          },
          {
            label: "ABC_ETL_2",
            value: "ETL包2",
          },
          {
            label: "ABC_ETL_3",
            value: "ETL包3",
          },
          {
            label: "ABC_ETL_4",
            value: "ETL包4",
          },
          {
            label: "ABC_ETL_5",
            value: "ETL包5",
          },
        ],
      } as SelectProps,
      hideInSearch: true,
    },
  ];
};
